<template>
	<div class="about">
	
		<el-card>
			<template #header>
				<div class="card-header">
					<span>
						<el-button type="primary" :icon="Search">搜索</el-button>
						<el-button type="danger">批量删除</el-button>
						<el-button type="success" :icon="Plus" @click="doAdd">添加</el-button>
						{{selectionList}}
					</span>
				</div>
			</template>
			<div>
				<el-table :data="tableData" style="width: 100%"  @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" />
					<el-table-column type="index" width="50" />
					<el-table-column prop="id" label="编号" width="180" />
					<el-table-column prop="name" label="名称" width="180" />
					<el-table-column prop="artistsname" label="歌手名字" />
					<el-table-column prop="url" label="音乐">
						<template #default="scope">
							<audio controls :src="scope.row.url" />
						</template>
					</el-table-column>
					<el-table-column label="专辑">
						<template #default="scope">
							<el-image  @click="forward(scope.row.id)" style="width: 60px; height: 60px" :src="scope.row.picurl" :fit="fill" />
						</template>
					</el-table-column>
					<el-table-column prop="status" label="是否上架" width="180">
						<template #default="scope">
							<el-text v-if="scope.row.status==='1'">已上架 </el-text>
							<el-tag :type="danger" v-if="scope.row.status==='0'">已下架 </el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template #default="scope">
							<el-button size="small" @click="doEdit(scope.row.id)">
								Edit
							</el-button>
							<el-button size="small" type="danger" @click="remove(scope.row.id)">
								Delete
							</el-button>
							<el-button size="small" type="danger" @click="doGetById(scope.row.id)">
								查看详情
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<template #footer>
				<el-pagination layout="prev, pager, next" :page-size="5" :total="page.items"
					@current-change="doPageChange" />
			</template>
		</el-card>
		<el-dialog v-model="dialogFormVisible"  width="500">
			<AddMusicForm   ref="AddMusicFormComponent" :title="dialogtitle"  @onClose="doOnClose" /> <!-- 应用子组件 并且注册自定义事件onClose  -->
		</el-dialog>

		<el-dialog  title="查看详情" v-model="dialog1FormVisible"  width="1000"  >
			<GetMusicInfo   ref="myMusicInfo"/>
		</el-dialog>
	</div>
</template>
<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	import {
		Delete,
		Edit,
		Search,
		Share,
		Plus
	} from '@element-plus/icons-vue'

	import AddMusicForm from '@/components/AddMusicForm.vue' // export  default 
	import GetMusicInfo   from '@/components/GetMusicInfo.vue'



	//定义响应式变量   tableData 本质上是一个代理对象，  代理ref里面的值  所以获取这个数组的值 用tableData.value
	const tableData = ref([])

	const page = ref({}) //分页对象

	const currentPage = ref(1)

	const initQuery = () => {
		fetch("http://localhost:3000/musics?_page=" + currentPage.value + "&_per_page=5&_sort=id").then(res => res
		.json()).then((result) => {
			tableData.value = result.data;
			page.value = result;

		})

	}

	onMounted(() => {
		initQuery()
	})


	const remove = (id) => {
		ElMessage.success('已经删除了，编号是' + id)

	}
	const doPageChange = (p) => {
		currentPage.value = p;
		initQuery()

	}
	const dialogFormVisible = ref(false)

	const doAdd = () => {
		dialogtitle.value='添加窗口'
		dialogFormVisible.value = true;

	}

	const doOnClose = (val) => {
		dialogFormVisible.value = false;
		initQuery();

	}
	
	const dialogtitle=ref('')
	
	const  AddMusicFormComponent =ref(null)  //特指子組件    模板引用
	

	const doEdit = (id) => {
		dialogtitle.value='編輯窗口'
		dialogFormVisible.value = true;
		//调用子组件暴漏的方法   nextTick函數 的意思是  dom元素出來之後，才調用内部的代碼
		nextTick(()=>{
			AddMusicFormComponent.value.doMyEdit(id);  //調用内部組件的編輯方法 
		})
	
	}


	const  dialog1FormVisible  =ref(false)

	//引用变量指向子组件
	const  myMusicInfo   =ref(null)   //当子组件的dom元素一旦渲染完毕之后形成实例， myMusicInfo 他就是实例的引用

	/**
	 * 查看详情
	 * @param id 
	 */
	const  doGetById  =(id)=>{
		dialog1FormVisible.value=true;
		//需要获得子组件的实例 （用模版引用）
		nextTick(()=>{
			myMusicInfo.value.queryById(id);
		})
		

	}
	const  selectionList  =ref([])

	const handleSelectionChange =(val)=>{
		selectionList.value=val;
	}
	
    import { useRoute,useRouter } from 'vue-router';

	const  router  =  useRouter();  //hooks 函数


	const  forward=(id)=>{
		//编程路由

		router.push({path:'/test1',query:{myId:id}})   //test1?myid=1


	}

	

	
</script>
<style scoped>
	.el-card {
		width: 100%;
		margin: 0 auto;

	}

	.about h1 {
		text-align: center;

	}
</style>